<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>操作</title>
    <!-- 视图格式 -->
    <style>
        #app {
            width: 500px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table tr th,
        table tr td {
            height: 35px;
            border-bottom: solid 1px #999;
            text-align: center;
        }
        .clear-btn {
            text-align: right;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 图表 -->
        <table>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr v-for="(obj,index) in users">
                <td>{{obj.userId}}</td>
                <td>{{obj.userName}}</td>
                <td>{{obj.userAge}}</td>
                <td><button @click="del(index)">删除</button></td>
            </tr>
            <tr>
                <td colspan="4"><button @click="clear">清空</button></td>
            </tr>
        </table>

        <h3>添加</h3>
        姓名：<input type="text" v-model="userName"><br>
        年龄：<input type="text" v-model="userAge"><br>
        <button @click="add">添加</button>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    users: [
                        {
                            userId: 1,
                            userName: '张三',
                            userAge: 20
                        }, {
                            userId: 2,
                            userName: '李四',
                            userAge: 21
                        }, {
                            userId: 3,
                            userName: '王五',
                            userAge: 22
                        }
                    ],
                    userName: '',
                    userAge: 0
                }
            },
            methods: {
                add() {
                    let userId = 0;
                    if (this.users.length == 0) {
                        userId = 1;
                    } else {
                        userId = this.users[this.users.length - 1].userId + 1;
                    }
                    this.users.push({
                        userId: userId,
                        userName: this.userName,
                        userAge: this.userAge
                    });
                },
                del(index) {
                    this.users.splice(index, 1);
                },
                clear() {
                    this.users.splice(0, this.users.length);
                    //this.users = [];
                }
            }
        }).mount('#app')
    </script>
</body>
</html>